<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="../../js/echarts-all-3.js"></script>
       <script type="text/javascript" src="../../js/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="../../js/extension/jquery-2.2.4.js"></script>
       <script type="text/javascript" src="../../js/map/js/china.js"></script>
       <script type="text/javascript" src="../../js/map/js/world.js"></script>
       <script type="text/javascript" src="../../js/api.js"></script>
       <script type="text/javascript" src="../../js/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get('webkit-dep.json', function (webkitDep) {
    myChart.hideLoading();

    option = {
        legend: {
            data: ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other']
        },
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
                normal: {
                    position: 'right',
                    formatter: '{b}'
                }
            },
            draggable: true,   //节点是否可拖拽，只在使用力引导布局的时候有用。
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 5,
                repulsion: 20,
                gravity: 0.2
            },
            edges: webkitDep.links
        }]
    };

    myChart.setOption(option);
});;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>